<template>
  <div class="bg-white h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-md">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="text-xl font-bold text-white">求职沟通</div>
        <nav class="flex items-center space-x-6">
          <router-link to="/resume" class="text-white hover:text-blue-200">简历</router-link>
          <router-link to="/communication" class="text-white hover:text-blue-200">消息</router-link>
          <div class="flex items-center space-x-2">
            <span>{{ authStore.user?.name }}</span>
            <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden">
              <img :src="authStore.user?.avatar" :alt="authStore.user?.name" class="w-full h-full object-cover">
            </div>
          </div>
        </nav>
      </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
      <!-- 左侧会话列表 -->
      <div class="w-96 bg-white border-r border-gray-100 flex flex-col">
        <!-- 搜索框 -->
        <div class="p-4 border-b border-gray-100">
          <div class="relative">
            <input 
              v-model="searchQuery"
              type="text" 
              placeholder="搜索30天内的联系人" 
              class="w-full py-2 px-4 bg-gray-50 rounded-lg text-sm border-none focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
            <div class="absolute right-3 top-2.5 w-5 h-5 flex items-center justify-center text-gray-400">
              <i class="ri-search-line"></i>
            </div>
          </div>
        </div>

        <!-- 筛选标签 -->
        <div class="flex px-4 py-2 border-b border-gray-100 gap-2">
          <button 
            v-for="filter in chatFilters"
            :key="filter"
            @click="activeFilter = filter"
            :class="[
              'px-3 py-1 rounded-full text-sm whitespace-nowrap',
              activeFilter === filter 
                ? 'bg-blue-600 bg-opacity-10 text-blue-600' 
                : 'bg-gray-50 text-gray-500 hover:bg-gray-100'
            ]"
          >
            {{ filter }}
          </button>
        </div>

        <!-- 会话列表 -->
        <div class="flex-1 overflow-y-auto">
          <ChatListItem 
            v-for="conversation in filteredConversations"
            :key="conversation.id"
            :conversation="conversation"
            :active="selectedConversationId === conversation.id"
            @click="selectConversation(conversation.id)"
          />
        </div>
      </div>

      <!-- 右侧聊天区域 -->
      <div class="flex-1 flex flex-col bg-white">
        <ChatArea 
          v-if="selectedConversation"
          :conversation="selectedConversation"
        />
        <div v-else class="flex-1 flex items-center justify-center text-gray-500">
          请选择一个会话开始聊天
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useMessagesStore } from '../stores/messages'
import ChatListItem from '../components/ChatListItem.vue'
import ChatArea from '../components/ChatArea.vue'

const authStore = useAuthStore()
const messagesStore = useMessagesStore()

const searchQuery = ref('')
const activeFilter = ref('全部')
const selectedConversationId = ref<string | null>(null)

const chatFilters = ['全部', '未读', '新招聘', '仅沟通', '更多']

const filteredConversations = computed(() => {
  let conversations = messagesStore.conversations
  
  if (searchQuery.value) {
    // Filter by search query
    conversations = conversations.filter(conv => 
      conv.lastMessage.content.includes(searchQuery.value)
    )
  }
  
  if (activeFilter.value === '未读') {
    conversations = conversations.filter(conv => conv.unreadCount > 0)
  }
  
  return conversations
})

const selectedConversation = computed(() => 
  selectedConversationId.value 
    ? messagesStore.conversations.find(conv => conv.id === selectedConversationId.value)
    : null
)

const selectConversation = (conversationId: string) => {
  selectedConversationId.value = conversationId
  messagesStore.markAsRead(conversationId)
}

// Select first conversation by default
const conversations = messagesStore.conversations
if (conversations.length > 0) {
  selectedConversationId.value = conversations[0].id
}
</script>
